<template>
  <div class="item">
      <div class="img"><a href="##"><img v-lazy="data.picUrl" alt=""></a></div>
      <p>{{data.name}}</p>
  </div>
</template>

<script>
export default {
    props:["data"]

    
}
</script>

<style scoped>
.item {
    margin-top: 10px;
    width: 250px;
    height: 300px;
}
.item img {
    border-radius: 20px;
    width: 250px;
    height: 250px;
}
.item p {
    margin-top: 20px;
}
.img {
  border-radius: 20px;
  width: 250px;
  height: 250px;
  overflow: hidden;
}
.img img {
  border-radius: 20px;
  width: 250px;
  height: 250px;
  transition: all 1s;
}
.img img:hover{
  transform: scale(1.2);
}
</style>